import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
  allCheck=(event)=>{
    const {checkAllAction}=this.props
    if(event.target.checked){
      checkAllAction(true)
    }else{
      checkAllAction(false)
    }
  }
  deletChecked=()=>{
    this.props.deleteChecked()
  }
  render() {
    const {todo}=this.props
    // const num=todo.filter(val=>val.done===true)
    const count=todo.reduce((prev,todo)=>prev+(todo.done?1:0),0)
    return (
      <div className='footer'>
        <div className='left'>
          <input type="checkbox" onChange={this.allCheck} name="" id="" checked={count===todo.length&&count!==0?true:false} />
          <span>{count}/{todo.length}</span>
        </div>
        <button onClick={this.deletChecked}>删除按钮</button>

      </div>
    )
  }
}
